import "./index.less";
import { Context } from "../index.jsx"; //导入父组件中的CreateContext对象
import { useState, useEffect, useContext } from "react";
import { Context_App } from "../../../App";
import PubSub from "pubsub-js";

export const Playltems = (props) => {
  const [SongItems, SetSongItems] = useState([]);
  const res = useContext(Context); //接受父组件的传值
  const AppCallback = useContext(Context_App);
  useEffect(() => {
    SetSongItems(res.SongList); //渲染数据
  });
  const emitPlay = (item) => {
    // 通过上下文得回调函数将孙组件的数据传递给根节点
    AppCallback.callback(item);
    PubSub.subscribeOnce("emitPlay", (fn, data) => {
      data();
    });
    //使用pubsub方法订阅兄弟组件的发布，并执行方法
  };
  return (
    <div className="playItems">
      <div className="playItems_top">
        <div className="left">
          <svg
            t="1634467205484"
            className="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http//www.w3.org/2000/svg"
            p-id="5077"
            width="200"
            height="200"
          >
            <path
              d="M512 42.666667C252.793333 42.666667 42.666667 252.793333 42.666667 512s210.126667 469.333333 469.333333 469.333333 469.333333-210.126667 469.333333-469.333333S771.206667 42.666667 512 42.666667z m0 896c-235.64 0-426.666667-191.026667-426.666667-426.666667s191.026667-426.666667 426.666667-426.666667 426.666667 191.026667 426.666667 426.666667-191.026667 426.666667-426.666667 426.666667z m-74.666667-213.38a53.373333 53.373333 0 0 1-53.333333-53.333334V352.066667A53.333333 53.333333 0 0 1 467.373333 308L702 467.933333a53.333333 53.333333 0 0 1 0 88.133334L467.373333 716a53.286667 53.286667 0 0 1-30.04 9.286667z m0.08-383.933334a11.093333 11.093333 0 0 0-5.08 1.28 10.446667 10.446667 0 0 0-5.666666 9.433334v319.866666a10.666667 10.666667 0 0 0 16.666666 8.82l234.666667-159.94a10.666667 10.666667 0 0 0 0-17.626666l-234.666667-159.933334a10.313333 10.313333 0 0 0-5.906666-1.92z"
              fill="#5C5C66"
              p-id="5078"
            ></path>
          </svg>
          <span style={{ marginLeft: "5px" }}>播放全部( 共{SongItems.tracks?.length}首)</span>
        </div>
        <span className="collection">+收藏{"  " + SongItems.subscribedCount}</span>
      </div>
      <ul className="playItmes_Content">
        {SongItems.tracks?.map((items, index) => (
          <li className="items" key={items.id}>
            <div className="playTitle">
              <span className="number">{index + 1}</span>
              <div>
                <p>{items.name.length > 12 ? items.name.substring(0, 9) + "..." : items.name}</p>
                <span>{items.alia[0]}</span>
                <span>
                  {items.al.name.length > 12
                    ? items.al.name.substring(0, 9) + "..."
                    : items.al.name}
                </span>
              </div>
            </div>
            <div className="playBtn">
              <svg
                t="1634482871992"
                className="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http//www.w3.org/2000/svg"
                p-id="5371"
                width="200"
                height="200"
                onClick={() => {
                  emitPlay(items);
                }}
              >
                <path
                  d="M512 42.666667C252.793333 42.666667 42.666667 252.793333 42.666667 512s210.126667 469.333333 469.333333 469.333333 469.333333-210.126667 469.333333-469.333333S771.206667 42.666667 512 42.666667z m0 896c-235.64 0-426.666667-191.026667-426.666667-426.666667s191.026667-426.666667 426.666667-426.666667 426.666667 191.026667 426.666667 426.666667-191.026667 426.666667-426.666667 426.666667z m-74.666667-213.38a53.373333 53.373333 0 0 1-53.333333-53.333334V352.066667A53.333333 53.333333 0 0 1 467.373333 308L702 467.933333a53.333333 53.333333 0 0 1 0 88.133334L467.373333 716a53.286667 53.286667 0 0 1-30.04 9.286667z m0.08-383.933334a11.093333 11.093333 0 0 0-5.08 1.28 10.446667 10.446667 0 0 0-5.666666 9.433334v319.866666a10.666667 10.666667 0 0 0 16.666666 8.82l234.666667-159.94a10.666667 10.666667 0 0 0 0-17.626666l-234.666667-159.933334a10.313333 10.313333 0 0 0-5.906666-1.92z"
                  fill="#5C5C66"
                  p-id="5372"
                ></path>
              </svg>
              <svg
                t="1634483240167"
                className="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http//www.w3.org/2000/svg"
                p-id="7551"
                width="200"
                height="200"
              >
                <path
                  d="M512.12288 0.43008c59.12064 0 108.38016 49.26464 108.38016 108.38528s-49.26464 108.3904-108.38016 108.3904c-59.12064 0-108.39552-49.27488-108.39552-108.3904C403.73248 49.69472 453.00736 0.43008 512.12288 0.43008z m0 400.71168c59.12064 0 108.38016 49.26464 108.38016 108.38528 0 59.13088-49.26464 108.3904-108.38016 108.3904-59.12064 0-108.39552-49.26464-108.39552-108.3904s49.28-108.38528 108.39552-108.38528z m0 400.71168c59.12064 0 108.38016 49.27488 108.38016 108.38528 0 59.13088-49.26464 108.39552-108.38016 108.39552-59.12064 0-108.39552-49.26976-108.39552-108.39552 0.00512-59.1104 49.28-108.38528 108.39552-108.38528z m0 0"
                  p-id="7552"
                  fill="#bfbfbf"
                ></path>
              </svg>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};
